<template>
	<view>
		<view class="frd-header">
			<image src="../../static/image/fillBg.png"></image>
			<view class="cu-list menu padding-tb-sm">
				<view class="cu-item">
					<view class="content">
						<view class="text-bold">补液单号 BY202411271320</view>
						<view class="text-sm">2024-11-1 18:20:15！</view>
					</view>
					<view class="action">
						<view class="cu-btn radius">皖A45124</view>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<view>
							<text class="cuIcon-time text-xl"></text>
							<text class="text-sm">派单时间：2024-11-1 18:20:15！</text>
						</view>
						<view>
							<text class="cuIcon-rounddown text-xl"></text>
							<text class="text-sm">完成时间：2024-11-1 18:20:15！</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex dataLi align-center justify-center text-center radius">
				<view class="flex-sub">
					<view class="text-xxl">999.99</view>
					<view class="text-sm">补液总量(吨）</view>
				</view>
				<view class="flex-sub">
					<view class="text-xxl">999.99</view>
					<view class="text-sm">实际补液总量(吨）</view>
				</view>
				<view class="flex-sub">
					<view class="text-xxl">99</view>
					<view class="text-sm">任务数量</view>
				</view>
			</view>
		</view>
		<view class="frd-list">
			<view class="cu-list menu padding-top-sm"  v-for="i in 5">
				<view class="cu-item">
					<view class="content">
						<view class="text-bold">补液单号 BY202411271320</view>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<view>加注机编号</view>
					</view>
					<view class="action">
						YZ001
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<view>地址</view>
					</view>
					<view class="action" style="width:50%;">
						<view class="text-right padding-tb">北京市大兴镇北京市大兴镇北京市大兴镇北京市大兴镇大兴镇</view>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<view>补液量(吨）</view>
					</view>
					<view class="action">
						99.99
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<view>实际补液量(吨）</view>
					</view>
					<view class="action">
						66
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<view>完成时间</view>
					</view>
					<view class="action">
						2024年11月1日 20:20:11
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.frd-header{
		position:relative;
		image{
			position:absolute;
			top:20rpx;
			left:20rpx;
			width:710rpx;
			height:430rpx;
		}
		.dataLi{
			position:absolute;
			z-index:999;
			top:260rpx;
			left:40rpx;
			width:670rpx;
			height:160rpx;
			background: white;
			.text-sm{
				color:#7c7c7c;
			}
		}
		.cu-list{
			position:absolute;
			z-index:999;
			top:20rpx;
			left:20rpx;
			width:710rpx;
			.cu-item{
				background: none;
				color:#fff;
				&::after{
					border:0;
				}
			}
			.cu-btn{
				background: #18AE91;
				color:#fff;
			}
		}
	}
	.frd-list{
		padding-top:450rpx;
		color:#7C7C7C;
		.text-bold{
			color:#333;
		}
		.cu-list{
			margin-top:0;
		}
	}
</style>